<template>
	<!-- 地区选择组件 -->
	<view style="display: flex; align-items: center; width: 100%; position: relative;">
		<u-input v-model="region" placeholder="请选择省市区" border="none" disabledColor="#ffffff"
			@click="showRegionPicker = true" style="flex: 1; min-width: 0;"></u-input>
		<u-icon name="arrow-right" @click="showRegionPicker = true" style="margin-left: auto;"></u-icon>
		<u-picker :show="showRegionPicker" :columns="columns" keyName="label" @change="onChange"
			@confirm="regionConfirm" @cancel="showRegionPicker = false"
			style="position: absolute; z-index: 999;"></u-picker>
	</view>
</template>

<script>
	import regions from '@/common/region-data.js'; // 地区数据
	export default {
		props: {
			region: {
				type: String,
				default: '默认值'
			},
		},
		data() {
			return {
				showRegionPicker: false, // 显示地区选择器
				columns: [], // 选择器列数据
				selectedArea: null, // 选中的地区
				currentSelected: [0, 0, 0], // 当前选中的索引
				areaData: regions,
			}
		},
		created() {
			this.initPickerData()
		},
		methods: {
			// 加载要编辑的地址数据
			initPickerData() {
				// 初始化省份数据
				const provinces = Object.keys(this.areaData).map(province => {
					return {
						label: province,
						value: province
					}
				})

				// 初始化第一列（省份）
				this.columns = [provinces]

				// 默认加载第一个省份的城市数据
				const firstProvince = provinces[0].value
				this.loadCities(firstProvince)

				// 默认加载第一个城市的区县数据
				const firstCity = Object.keys(this.areaData[firstProvince])[0]
				this.loadDistricts(firstProvince, firstCity)
			},

			loadCities(province) {
				// 获取该省份下的城市
				const cities = Object.keys(this.areaData[province]).map(city => {
					return {
						label: city,
						value: city
					}
				})

				// 更新第二列（城市）
				if (this.columns.length > 1) {
					this.$set(this.columns, 1, cities)
				} else {
					this.columns.push(cities)
				}
			},

			loadDistricts(province, city) {
				// 获取该城市下的区县
				const districts = this.areaData[province][city].map(district => {
					return {
						label: district,
						value: district
					}
				})

				// 更新第三列（区县）
				if (this.columns.length > 2) {
					this.$set(this.columns, 2, districts)
				} else {
					this.columns.push(districts)
				}
			},

			// picker变化时的回调
			onChange(e) {
				const {
					columnIndex,
					index
				} = e

				// 更新当前选中的索引
				this.currentSelected[columnIndex] = index

				// 如果选择了省份列
				if (columnIndex === 0) {
					const province = this.columns[0][index].value
					this.loadCities(province)

					// 重置城市和区县的选中索引
					this.currentSelected[1] = 0
					this.currentSelected[2] = 0

					// 加载新省份下的第一个城市的区县
					const newCities = this.columns[1]
					if (newCities && newCities.length > 0) {
						const firstCity = newCities[0].value
						this.loadDistricts(province, firstCity)
					}
				}
				// 如果选择了城市列
				else if (columnIndex === 1) {
					const province = this.columns[0][this.currentSelected[0]].value
					const city = this.columns[1][index].value
					this.loadDistricts(province, city)

					// 重置区县的选中索引
					this.currentSelected[2] = 0
				}
			},

			// 地区选择确认
			regionConfirm(e) {
				 this.$emit('getregion', e);
				 this.showRegionPicker = false
			},
		}

	}
</script>

<style>
</style>